<template>
  <div>
    <div class="info">
      <div class="header">
        <van-row align="center">
          <van-col span="8">
            <van-image
              class="img"
              round
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </van-col>
          <van-col span="16">
           <van-row justify="start" >
            <span>曾德启</span>
            <van-tag round type="primary" color="#139998" class="tag">已关联内部账号</van-tag>
           </van-row>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">
          </van-col>
          <van-col span="16">
          <!-- 详细信息 -->
          <div class="person"> 
            <van-row justify="start" class="col">
            <van-col span="8">用户名：</van-col>
            <van-col>CIO123456</van-col>
          </van-row>
          <van-row justify="start" class="col">
            <van-col span="8">手机号：</van-col>
            <van-col>13800138000</van-col>
          </van-row>
          <van-row justify="start" class="col">
            <van-col span="8">职位：</van-col>
            <van-col>端茶专员</van-col>
          </van-row>
          <van-row justify="start">
            <van-col span="8">所在部门：</van-col>
            <van-col>ABC部门</van-col>
          </van-row>
          </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="我的课程" is-link icon="label" to="/mycourse">
      </van-cell>
      <van-cell icon="gold-coin-o" title="我的证书" is-link to="/mycertificate" />
      <van-cell icon="gift-o" title="课程反馈" is-link to="/myfeedback"/>
    </van-cell-group>
    <div class="footer">
      <van-row justify="center">
        <van-button type="danger" class="logoutBtn" color="#e74e52">退出登录</van-button>
      </van-row>
      <van-row justify="center" class="versions">版本号：1.0.0</van-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const title = ref('');
</script>

<style lang="scss">
.info {
  background-color: #fff;
  padding: 20px 30px;
  .header {
    .img {
      height: 70px;
      width: 70px;
    }
    .tag {
      margin-left: 5px;
    }
  }
  .person {
    font-size: 14px;
    color: #888888;
    .col {
      margin-bottom: 8px;
    }
  }
}
.footer {
  margin-top: 20px;
  .logoutBtn {
    width: 180px;
  }
  .versions{
    font-size: 14px;
    color: #888;
  }
}

</style>
